<div ng-controller="integralController">
    <!-- contain BEGIN -->
        <div class="right-product right-full">
            <div class="center-back right-back">
                <div class="container-fluid">
                    <div class="info-center">
                        <div class="page-header">
                            <div class="pull-left">
                                <h4>IP规则列表</h4>
                            </div>
                        </div>

                        <div class="search-box row">
                            <div class="col-md-1">
                                <button type="button" class="btn btn-default" ng-click="newlyAdded($event)" data-toggle="modal" data-target="#newlyAdded">
                                    <span class="glyphicon glyphicon-plus"></span> 新增
                                </button>
                            </div>
                        </div>

                        <div class="clearfix"></div>

                        <div class="table-margin">
                            <table class="table table-bordered table-header">
                                <thead>
                                    <tr>
                                        <td class="w10 text-center">IP规则ID</td>
                                        <td class="w10 text-center">规则名称</td>
                                        <td class="w10 text-center">优先级</td>
                                        <td class="w10 text-center">规则模式</td>
                                        <td class="w10 text-center">IP表达式</td>
                                        <td class="w10 text-center">是否启用</td>
                                        <td class="w10 text-center">操作</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="val in tabVal">
                                        <td class="text-center">{{ val.ipRuleId }}</td>
                                        <td class="text-center">{{ val.ruleName }}</td>
                                        <td class="text-center">{{ val.sortIndex }}</td>
                                        <td class="text-center">{{ val.ruleMode }}</td>
                                        <td class="text-center">{{ val.expression }}</td>
                                        <td class="text-center">{{ val.enabled }}</td>
                                        
                                        <td class="text-center icon-td">
                                            <i class="icon-details" ng-click="details($event, $index)" data-toggle="modal" data-target="#details"></i>
                                            <i class="icon-edit"    ng-click="edit($event, $index)"    data-toggle="modal" data-target="#edit"></i>
                                            <i class="icon-delete"  ng-click="delete($event, $index)"  data-toggle="modal" data-target="#delete"></i>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="12">
                                            <div class="pull-right">
                                                <nav>
                                                    <tm-pagination conf="paginationConf"></tm-pagination>
                                                </nav>
                                            </div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- contain END -->

    <!-- 新增 BEGIN -->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="newlyAdded">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">新增IP规则</h4></div>
                    <div class="modal-body">
                    	
                    <form name="ipRulesAdd_form" novalidate>
	                        <div class="form-group">
		                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则名称：</label>
		                            <div class="col-xs-12 col-sm-9">
		                                <input type="text" ng-class="test" 
		                                	name="ruleName"
		                                	ng-minlength="2" 
		                                	ng-maxlength="20"  
		                                	class="form-control" 
		                                	ng-model="details_ipRulesName" 
		                                	required />
		                                <label class="red required">*</label>
		                                 <div class="error" ng-show="ipRulesAdd_form.ruleName.$dirty && ipRulesAdd_form.ruleName.$invalid">
										    <small class="error" ng-show="ipRulesAdd_form.ruleName.$error.required">请输入规则名</small>
										    <small class="error" ng-show="ipRulesAdd_form.ruleName.$error.minlength ">规则名长度在2-20之间</small>
										    <small class="error" ng-show=" ipRulesAdd_form.ruleName.$error.maxlength">规则名长度在2-20之间</small>
			 							 </div>
		                            </div>       
	                        </div>
	                  
	                        <div class="form-group height-auto">
	                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">优先级：</label>   
	                            <div class="col-xs-12 col-sm-9">
	                                <select ng-model="details_sortIndex" class="form-control"  ng-init="details_sortIndex='1'">
                                    <option id="" value="1" selected>高</option>
                                     <option id="" value="2">中</option>
                                      <option id="" value="3">低</option>
                                    
                                    </select>
                       
	                            </div>
                              </div>  
                              <div class="form-group height-auto">
                                  <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则模式：</label>
	                            <div class="col-xs-12 col-sm-9">
	                                <select ng-model="details_ruleMode" class="form-control"  ng-init="details_ruleMode='0'">
                                    
                                    <option id="" value="0">拒绝</option>
                                     <option id="" value="1">允许</option>
                                      
                                    
                                    </select>
                       
	                            </div>
                               </div>
                               <div class="form-group">
		                            <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
		                            <div class="col-xs-12 col-sm-9">
		                                <input type="number" 
		                                	name="expression"
		                                	ng-minlength="2" 
		                                	ng-maxlength="11"
		                                	autocomplete="off" 
		                                	class="form-control" 
		                                	ng-model="details_expression"
		                                	ng-pattern="/^1[3,5,8]\d{9}$/"
		                                	required />
		                                <label class="red required">*</label>
		                                 <div class="error" ng-show="ipRulesAdd_form.expression.$dirty && ipRulesAdd_form.expression.$invalid">
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.pattern">请输入IP表达式</small>
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.required">IP表达式不能为空</small>
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.minlength ">IP表达式长度在1-11之间</small>
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.maxlength">IP表达式长度在1-11之间</small>
			 							 </div>
		                            </div>       
	                        </div>

                                
                            <div class="form-group height-auto">
                              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">是否启用：</label>
                              <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_enabled" class="form-control"  ng-init="details_enabled='1'">
                                    
                                    <option id="" value="1">启用</option>
                                     <option id="" value="0">不启用</option>
                                      
                                    
                                  </select>
	                            </div>
                            </div>
                    </form>
                         <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="userAdd_form.$invalid"  ng-click="confirmNewlyAdded()">确定</button></div>
                         <div class="col-xs-12 col-sm-9">
                        IP表达式说明
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        1.xxx.xxx.xxx.xxx（一个确定的IP地址）。
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        2.使用‘|’隔开每个子表达式。
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        3.IP段设置。例如‘10.1’表示所有以‘10.1’开头的IP地址，如10.1.1.0和10.1.0.1而不是10.12.1.1。</div>
                         <div class="col-xs-12 col-sm-9">
                        4.使用‘-’来设置一个IP范围，例如‘222.111-222.113'，比如包括222.111.0.1，222.112.02，...，222.113.0.254
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        5.使用’!‘来排除IP地址。例如’!222.111-222.113'，比如不包括'222.111.0.1,222.113.0.254。
                       </div>
                        <div class="col-xs-12 col-sm-9">
                        6.使用‘*’来包含所有的IP地址。
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        7.使用‘!*'来排除所有的IP地址。
                        </div>
                         <div class="col-xs-12 col-sm-9">
                        8.’xxx.xxx'等同于'xxx.xxx.'等同于'xxx.xxx.*'
                        </div>
               			</div>
                    </div>
                   
            </div>
        </div>
    <!-- 新增 END -->

    <!-- 详情 BEGIN -->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="details">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">IP规则详细信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP规则ID：</label>
                                <input type="text" name="ipRuleId" class="form-control" ng-model="details_ipRuleId" disabled />    
                        </div>
                        <div class="form-group" >
                            <label class="col-xs-12 col-sm-3 control-label text-right">规则名称：</label>
                            <input type="text" name="ruleName" class="form-control" ng-model="details_ruleName" disabled />
                        </div>
                        <div class="form-group" >
                         <label class="col-xs-12 col-sm-3 control-label text-right">优先级：</label>
                           
                              <input type="text" name="sortIndex" class="form-control" ng-model="details_sortIndex" disabled />
                                </div>
                                
                            <div class="form-group" >
                         <label class="col-xs-12 col-sm-3 control-label text-right">规则模式：</label>
                            <input type="text" name="ruleMode" class="form-control" ng-model="details_ruleMode" disabled />
                                </div>
                                 <div class="form-group" >
                         <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                               <textarea rows="5" type="text" name="expression"   class="form-control" ng-model="details_expression" ></textarea>
                                </div>
                        <div class="form-group" >
                         <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>
                            <input type="text" name="enabled" class="form-control" ng-model="details_enabled" disabled />
                                </div>
                        <div class="form-group" >
                         <label class="col-xs-12 col-sm-3 control-label text-right">绑定用户：</label>
                           
                                <input type="text" name="userName" class="form-control" ng-model="details_userName" disabled />
                                </div>
                       
                      
					</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回列表</button>
                    </div>
                      <div class="form-group" >
                      
                      </div>
                </div>
            </div>
        </div>
    <!-- 详情 END -->

    <!-- 修改 BEGIN -->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="edit">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <p>&nbsp;</p>
                        <h4 class="modal-title" id="myModalLabel">修改IP规则</h4>
                    </div>
                    <div class="modal-body">
                    	<form name="ipRulesUpdate_form" novalidate>
	                        <div class="form-group">
		                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则名称：</label>
		                            <div class="col-xs-12 col-sm-9">
		                                <input type="text" ng-class="test" 
		                                	name="ruleName"
		                                	ng-minlength="2" 
		                                	ng-maxlength="20"  
		                                	class="form-control" 
		                                	ng-model="details_ipRulesName" 
		                                	required />
		                                <label class="red required">*</label>
		                                 <div class="error" ng-show="ipRulesUpdate_form.ruleName.$dirty && ipRulesUpdate_form.ruleName.$invalid">
										    <small class="error" ng-show="ipRulesUpdate_form.ruleName.$error.required">请输入IP表达式</small>
										    <small class="error" ng-show="ipRulesUpdate_form.ruleName.$error.minlength ">请输入正确的IP表达式，规则如下</small>
										   
			 							 </div>
		                            </div>       
	                        </div>
	                  
	                        <div class="form-group height-auto">
	                            <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">优先级：</label>
	                            <div class="col-xs-12 col-sm-9">
	                                <select ng-model="details_sortIndex">
                                    
                                    <option id="" value="1">高</option>
                                     <option id="" value="2">中</option>
                                      <option id="" value="3">低</option>
                                    
                                    </select>
                       
	                            </div>
                              </div>  
                              <div class="form-group height-auto">
                                  <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">规则模式：</label>
	                            <div class="col-xs-12 col-sm-9">
	                                <select ng-model="details_ruleMode">
                                    
                                    <option id="" value="0">拒绝</option>
                                     <option id="" value="1">允许</option>
                                      
                                    
                                    </select>
                       
	                            </div>
                               </div> 
                               <div class="form-group height-auto">
                                 <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                                <div class="col-xs-12 col-sm-9">
                                    <textarea rows="5" type="text" name="expression"   class="form-control" ng-model="details_expression" required ng-pattern="/^\w{6,20}$/"/ ></textarea>
                                    <label class="red required">*</label>
                                </div>
                                             <div class="error" ng-show="ipRulesAdd_form.expression.$dirty && ipRulesAdd_form.expression.$invalid">
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.required">请输入IP表达式</small>
										    <small class="error" ng-show="ipRulesAdd_form.expression.$error.minlength ">请输入正确的IP表达式，规则如下</small>
										    
			 							 </div>
                            </div> 
                            <div class="form-group height-auto">
                              <label class="col-xs-12 col-sm-3 control-label text-right" for="dhName">是否启用：</label>
                              <div class="col-xs-12 col-sm-9">
                                <select ng-model="details_enabled">
                                    
                                    <option id="" value="1">启用</option>
                                     <option id="" value="0">不启用</option>
                                      
                                    
                                  </select>
	                            </div>
                            </div>
                   	 	</form>
                   	</div> 	
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" ng-disabled="userUpdate_form.$invalid" ng-click="confirmEdit($event)">修改</button>
                    </div>
                </div>
            </div>
        </div>
    <!-- 修改 END -->

    <!-- 删除 BEGIN -->
        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" id="delete">
            <div class="modal-dialog delete-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title text-center">删除警告</h4></div>
                    <div class="modal-body text-center">请确认是否删除该行IP规则</div>
                    <div class="modal-footer">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button></div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary pull-left confirm-del-btn" ng-click="confirmDel()" data-dismiss="modal">确定</button></div>
                    </div>
                </div>
            </div>
        </div>
    <!-- 删除 END -->
</div>